<template>
  <div>
    <a-card :bordered="false" >
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-input-search v-model="queryParam.playlistName" placeholder="查询歌单" @search="listPlaylist" @change="listPlaylist" />
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div style="display: flex; flex-wrap: wrap;">
        <div v-for="(item,index) in playlists" :key="index">
          <a-col :md="6" :sm="24">
            <a-card hoverable class="card" @mouseover="handleOver($event)" @mouseleave="handleLeave($event)">
              <img
                slot="cover"
                :src="preUrl + (item.imageUrl === null ? '周杰伦.jpg' : item.imageUrl)"
                @click="goToPlaylistDetail(item)"
              />
              <a-card-meta :title="item.playlistName">
                <template slot="description">
                  {{ item.playlistInfo }}
                  <div>收藏人数： {{ item.collectors }}</div>
                </template>
              </a-card-meta>
              <div style="float: right;visibility: hidden">
                <a-popconfirm
                  title="取消收藏该歌单？"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="cancelCollect(item)"
                >
                  <a-icon style="float: right;color: red" type="heart"/>
                </a-popconfirm>
              </div>
            </a-card>
          </a-col>
        </div>
      </div>
      <a-pagination
        v-model="pageNo"
        :total="totalCount"
        :current="pageNo"
        :pageSize="pageSize"
        show-less-items
        style="margin-top: 15px"
        :pageSizeOptions="pageSizeOptions"
        :showSizeChanger="true"
        :hideOnSinglePage="true"
        @change="listPlaylist"
        @showSizeChange="changePageSize"/>
    </a-card>
  </div>
</template>

<script>
  import { query, removePlaylistByUserId } from '@/api/music/collectionPlaylist'
  import { listAllTag } from '@/api/tag/tag'
  export default {
    data () {
      return {
        // 查询参数
        queryParam: {},
        pageNo: 1,
        pageSize: 8,
        totalCount: 0,
        pageSizeOptions: ['8', '16', '32'],
        playlists: [],
        tags: [],
        preUrl: '/api/file/download/image/'
      }
    },
    created () {
      this.listPlaylist()
      listAllTag()
        .then(res => {
          if (res.data.message !== 'error') {
            this.tags = res.data.result
          } else {
            this.$message.error('查询标签失败！')
          }
        })
    },
    methods: {
      changePageSize (current, size) {
        this.pageNo = current
        this.pageSize = size
        this.listPlaylist()
      },
      handleOver (e) {
        e.currentTarget.children[1].children[1].style.visibility = 'visible'
      },
      handleLeave (e) {
        e.currentTarget.children[1].children[1].style.visibility = 'hidden'
      },
      listPlaylist () {
        const reqParams = {
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
        const queryJson = { 'queryParam': JSON.stringify(this.queryParam) }
        query(Object.assign(reqParams, queryJson))
          .then(res => {
            if (res.data.message !== 'error') {
              this.playlists = res.data.result.data
              this.totalCount = res.data.result.totalCount
              // console.log(JSON.stringify(res.data.result))
            } else {
              this.$message.error('查询歌单失败！')
            }
          })
      },
      goToPlaylistDetail (record) {
        console.log(record)
        this.$router.push({ name: 'playlistDetail',
          params: record
        })
      },
      cancelCollect (playlist) {
        removePlaylistByUserId({ playlistId: playlist.playlistId })
          .then(res => {
            if (res.data.message !== 'error') {
              this.$message.success('取消收藏成功！')
              this.listPlaylist()
            } else {
              this.$message.error('取消收藏失败！')
            }
          })
      }
    }
  }
</script>

<style lang="less" scoped>
  .center {
    position: absolute;
    left: 50%; top:50%;
    transform: translate(-50%, -50%);
  }
  .card {
    width: 200px;
    margin-right: 15px;
    margin-top: 15px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
  img {
    width: 100%;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
  ::v-deep .ant-card-meta-title {
    font-size: 14px !important;
  }
  ::v-deep .ant-card-meta-description {
    font-size: 13px !important;
  }
  ::v-deep .ant-card-body {
    padding: 12px 12px 15px;
  }
</style>
